<template>
	<!-- 新增 -->
	<el-dialog
		title="新增账号"
		:visible.sync="dialog"
		width="450px">
		<!-- 内容 -->
		<el-form
			:model="ruleForm"
			:rules="rules"
			ref="ruleForm"
			label-width="70px"
			class="new">
			<div class="group">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
			</div>
			<div class="group">
				<el-form-item label="手机号" prop="phone">
					<el-input v-model="ruleForm.phone"></el-input>
				</el-form-item>
			</div>
			<div class="group">
				<el-form-item label="密码" prop="password">
					<el-input v-model="ruleForm.password"></el-input>
				</el-form-item>
			</div>
		</el-form>
		<!-- 提交 -->
		<div class="flex flex-end">
			<div class="btn">
				<el-button
					@click="dialog = false"
					size="small">取消
				</el-button>
			</div>
			<div class="btn">
				<el-button
					type="primary"
					@click="submit()"
					size="small">确定
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
export default {
	props:["ifShow"],
	watch:{
		ifShow(val){
			this.dialog = true;
		}
	},
	data() {
		var phone = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('请输入正确的手机号'));
			}
			else {
				const reg =/^1[0-9]\d{9}$/
				console.log(reg.test(value));
				if (reg.test(value)) {
					callback();
				}
				else {
					return callback(new Error('请输入正确的手机号'));
				}
			}
		};
		return {
			dialog:false,
			ruleForm:{
				name:"",
				phone:"",
				password:""
			},
			rules:{
				name:[
					{
						required: true,
						message: '不能为空',
						trigger: 'blur' ,
					},
					{
						max: 20,
						message: '不能超过20个字符',
						trigger: 'blur' ,
					}
				],
				phone:[
					{
						required: true,
						message: '不能为空',
						trigger: 'blur' ,
					},
					{
						 validator: phone,
						 trigger: 'blur'
					}
				],
				password:[
					{
						required: true,
						message: '不能为空',
						trigger: 'blur' ,
					},
					{
						max: 30,
						message: '不能超过30个字符',
						trigger: 'blur' ,
					}
				],
			}
		};
	}
};
</script>

<style lang="scss" scoped>
	// 饿了么样式
	/deep/ .el-dialog__header{
		text-align: center;
	}
	/deep/ .el-textarea__inner{
		height: 100px;
	}
	.new{
		padding: 0 20px 0 0;
	}
	.btn{
		margin-top: 10px;
		margin-right: 20px;
	}
</style>
